<template>
    <div class="betone-numbers">
        <div class="betone-numbers-bGroup-forward" v-for="(item,index) in redArray" :key="index+1/4">
            <image class="betone-numbers-bGroup-span" src="https://goucai-app.oss-cn-beijing.aliyuncs.com/home/redBall.png"></image>
            <text class="betone-numbers-bGroup-span-t">{{ formatNum(item) }}</text>
        </div>
        <div class="betone-numbers-bGroup-forward" v-for="(item,index) in buleArray" :key="index+1/5">
            <image class="betone-numbers-bGroup-span" src="https://goucai-app.oss-cn-beijing.aliyuncs.com/home/blueBall.png"></image>
            <text class="betone-numbers-bGroup-span-t">{{ formatNum(item) }}</text>
        </div>
    </div>
</template>
<script>
export default {
  props: {
  },

  data() {
    return {
      redArray: [],
      buleArray: [],
      time: null,
      i: 0,
      lock: false
    };
  },

  methods: {
    randomFn() {
      this.redArray = this.createRandowArr(1,35,5);
      this.buleArray = this.createRandowArr(1,12,2);
    },
    times() {
      if (!!this.lock) return;
      this.lock = true;
      this.time = () => {
        if (this.i > 12) {
          this.i = 0;
          this.time = null;
          this.lock = false;
          this.$emit("getRandow", {
            redArray: this.redArray,
            buleArray: this.buleArray
          });
          return;
        }
        this.randomFn();
        this.i++;
        setTimeout(this.time, 20);
      };

      this.time();
    },

    createRandowArr(min, max, length) {
      let r = [],
        o = {},
        a;

      for (var i = 0; i < length; i++) {
        a = Math.floor(min + max * Math.random());

        o[a] ? i-- : (r.push(a), (o[a] = true));
      }

      return r.sort((a, b) => (a < b ? -1 : 1));
    },
    
    formatNum(num) {
      if (num < 10) return "0" + num;
      return num.toString();
    }
  },

  mounted() {
    this.times();
  }
};
</script>


<style>
/* betone */
.betone-refresh-name {
  font-size: 24px;
  color: #bbb;
}
.betone-refresh-image {
  height: 24px;
  width: 24px;
  align-self: center;
  margin-left: 10px;
}
.betone-refresh-img {
  position: absolute;
  right: 27px;
  top: 30px;
  flex-direction: row;
}
.betone-numbers-button-name {
  color: #fff;
  font-size: 30px;
  text-align: center;
}
.betone-numbers-button {
  align-self: center;
  width: 218px;
  height: 72px;
  border-radius: 50px;
  box-shadow: 0px 5px 2px 2px #fbb8b8;
  justify-content: center;
}
.betone-numbers-bGroup-forward {
   width: 64px;
   height: 64px;
   justify-content: center;
   align-items: center;
   align-self:center;
   position: relative;
}
.betone-numbers-bGroup-span-t {
  font-size: 32px;
  width: 64px;
  text-align: center;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.betone-numbers-bGroup-span {
  height: 64px;
  width: 64px;
  position: absolute;
  top: 0;
  border-radius: 50px;
}
.betone-numbers-bGroup {
  justify-content: space-between;
  flex-direction: row;
  flex: 0 0 100%;
}
.betone-numbers {
  flex-wrap: nowrap;
  padding-top: 40px;
  padding-bottom: 40px;
  padding-right: 18px;
  padding-left: 18px;
  flex-direction: row;
  justify-content: space-between;
}
.betone-title-leftopentime {
  font-size: 24px;
  margin-left: 30px;
  color: #bbb6b6;
  align-self: flex-end;
}
.betone-title-left-hr {
  width: 6px;
  background-color: #e70d0d;
  margin-right: 10px;
  height: 30px;
  align-self: center;
}
.betone-title-left-title {
  align-self: flex-end;
  font-size: 32px;
  color: #333333;
}
.betone-title-left {
  flex-direction: row;
}
.betone {
  padding-top: 20px;
  padding-bottom: 30px;
  padding-right: 30px;
  padding-left: 30px;
  background-color: #fff;
  margin-top: 30px;
}
.betone-title {
  font-size: 25px;
  flex-direction: row;
}
/* betone */
</style>
